<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件分享</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        .file-info {
            margin-bottom: 20px;
        }
        .file-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .file-meta {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            color: #666;
        }
        .file-description {
            margin-bottom: 20px;
            line-height: 1.5;
        }
        .file-download {
            display: block;
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            text-align: center;
            text-decoration: none;
            border-radius: 5px;
            margin-top: 15px;
        }
        .file-download:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>文件分享</h1>
        
        <!-- 这里可以动态生成文件信息 -->
        <div id="file-container">
            <!-- 示例文件信息 -->
            <div class="file-info">
                <div class="file-title" id="file-title">示例文件标题</div>
                <div class="file-meta">
                    <span id="file-size">文件大小: 示例大小</span>
                    <span id="file-format">文件格式: 示例格式</span>
                </div>
                <div class="file-description" id="file-description">
                    示例文件描述：这是一个示例文件的描述信息，用于展示文件的基本信息。
                </div>
                <a href="#" class="file-download" id="file-download">下载文件</a>
            </div>
        </div>
    </div>

    <script>
        // 模拟从数据库获取文件信息
        // 在实际应用中，这里应该是通过 AJAX 请求从服务器获取数据
        function getFileById(fileId) {
            // 模拟的文件数据
            const files = [
                {
                    id: 1,
                    title: "示例文件 1",
                    size: "10MB",
                    format: "PDF",
                    description: "这是一个示例 PDF 文件，包含一些示例内容。",
                    downloadUrl: "https://example.com/files/example1.pdf"
                },
                {
                    id: 2,
                    title: "示例文件 2",
                    size: "5MB",
                    format: "TXT",
                    description: "这是一个示例 TXT 文件，包含一些示例文本内容。",
                    downloadUrl: "https://example.com/files/example2.txt"
                }
            ];

            // 查找匹配的文件
            const file = files.find(f => f.id === parseInt(fileId));
            return file;
        }

        // 初始化页面
        function initPage() {
            // 获取 URL 中的 token 参数
            const urlParams = new URLSearchParams(window.location.search);
            const token = urlParams.get('token');

            // 如果没有 token 参数，显示错误信息
            if (!token) {
                document.getElementById('file-container').innerHTML = '<p>错误：未提供文件标识符。</p>';
                return;
            }

            // 假设 token 是文件的 id
            const fileId = token;

            // 获取文件信息
            const file = getFileById(fileId);

            // 如果没有找到文件，显示错误信息
            if (!file) {
                document.getElementById('file-container').innerHTML = '<p>错误：文件未找到。</p>';
                return;
            }

            // 更新页面内容
            document.getElementById('file-title').textContent = file.title;
            document.getElementById('file-size').textContent = `文件大小: ${file.size}`;
            document.getElementById('file-format').textContent = `文件格式: ${file.format}`;
            document.getElementById('file-description').textContent = file.description;
            document.getElementById('file-download').href = file.downloadUrl;
            document.getElementById('file-download').textContent = '下载文件';
        }

        // 页面加载完成后初始化
        window.onload = initPage;
    </script>
</body>
</html>
